<template>
  <div>
    <slot :hot="hot">
      <div class="nav_title">
        <div>
          <img src="../images/icon/hot.png" alt="">
          热门歌单</div>
        <div @click="handleMoreHot">更多></div>
      </div>
      <div class="music_item">
        <div v-for="item of hot" :key="item.id">
          <img class="music_img" :src="item.coverImgUrl" alt="" />
          <div class="music_detail">{{ item.name }}</div>
        </div>
      </div>
    </slot>
    <slot :name="newlist">
      <div class="nav_title">
        <div>
          <img src="../images/icon/new.png" alt="">
          最新音乐</div>
        <div @click="handleMoreNew">更多></div>
      </div>
      <div class="music_item">
        <div v-for="data of newlist" :key="data.id">
          <img class="music_img" :src="data.blurPicUrl" alt="" />
          <div class="music_detail">{{ data.name }}</div>
        </div>
      </div>
    </slot>
    <slot name="dj">
      <div class="nav_title">
        <div>
          <img src="../images/icon/dj.png" alt="">
          主播电台</div>
        <div @click="handleMoreDj">更多></div>
      </div>
      <div class="music_item">
        <div v-for="list of dj" :key="list.id">
          <img class="music_img" :src="list.picUrl" alt="" />
          <div class="music_detail">{{ list.name }}</div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hot: [],
      newlist: [],
      dj: [],
    };
  },
  methods: {
      handleMoreNew(){
        var title="最新音乐"
          this.$router.push(`/moreDetail/${title}`)
      },
      handleMoreHot(){
        var hot="热门歌单"
          this.$router.push(`/moreDetail/${hot}`)
      },
      handleMoreDj(){
        var Dj="主播电台"
          this.$router.push(`/moreDetail/${Dj}`)
      }
  },

  mounted() {
    this.$http
      .get("http://47.108.197.28:3000/top/playlist/highquality")
      .then((res) => {
        // console.log(res);
        this.hot = res.data.playlists.slice(0, 3);
      });
    this.$http.get("http://47.108.197.28:3000/album/newest").then((item) => {
    //   console.log(item);
      this.newlist = item.data.albums.slice(0, 3);
    });
    this.$http
      .get("http://47.108.197.28:3000/personalized/djprogram ")
      .then((list) => {
        // console.log(list);
        this.dj = list.data.result.slice(0, 3);
      });
  },
};
</script>

<style>
.nav_title {
  display: flex;
  justify-content: space-between;
  margin-top:20px ;
}
.nav_title img{
  vertical-align: middle;
}
.music_item {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.music_img {
  width: 280px;
}
.music_detail {
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>